<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="indexBanner">
      <el-image
        style="width: 100%; height: 100%"
        :src="bannerUrl"
        fit="cover"
      ></el-image>
    </div>

    <!-- 版心 -->
    <div class="pageArea">
      <!-- 每个模块使用section 当作class名 -->
      <!-- 祭祖常識 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1" v-if="deviceType == 'mobile'">祭祖常識</div>
        </div>
        <div class="section_content">
          <div class="aboutBox">
            <div
              class="boxItem"
              v-for="(item, index) in aboutBoxList"
              :key="index"
            >
              <div class="left">
                <div class="pageH1"  v-if="deviceType == 'web' || deviceType == 'ipad'">{{ item.title }}</div>
                <div class="pageH3">{{ item.content }}</div>
                <div class="redButton">查看更多</div>
              </div>

              <div class="right"  v-if="deviceType == 'web' || deviceType == 'ipad'">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="item.boxUrl"
                  fit="cover"
                ></el-image>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 百家论坛 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">百家論壇</div>
          <div class="more" v-if="deviceType == 'web' || deviceType == 'ipad'">
            查看全部 >
          </div>
        </div>
        <div class="section_content">
          <div class="swiper-container-historyBox" v-if="deviceType == 'web' || deviceType == 'ipad'">
            <swiper :options="swiperoptionHistory" ref="mySwiper">
              <swiper-slide v-for="(item, index) in swiperList" :key="index">
                <div class="ForumContainer">
                  <!-- 轮播区域 -->
                  <div class="topBox">
                    <div class="leftBox">
                      <div
                        class="img"
                        :style="{
                          backgroundImage: 'url(' + item.forumUrl + ')',
                        }"
                      >
                        <div class="msg">
                          <div class="msgTtile">
                            {{ item.title }}
                          </div>
                          <div class="nextPage">
                            <i class="el-icon-right"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="rightMsg">
                      <div
                        class="rightItem"
                        v-for="(right, rightIndex) in item.rightMsgList"
                        :key="rightIndex"
                      >
                        <el-image
                          style="width: 370px; height: 300px"
                          :src="right.forumUrl"
                          fit="contain"
                        ></el-image>
                        <div class="rightTitle">
                          <div class="msgTitle">
                            {{ right.title }}
                          </div>
                          <div class="rightData">
                            {{ right.data }}
                          </div>
                          <div class="rightContent">
                            {{ right.content }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="bottomBox">
                    <div
                      class="rightItem"
                      v-for="(item, rightIndex) in swiperBottomList"
                      :key="rightIndex"
                    >
                      <el-image
                        style="width: 370px; height: 300px"
                        :src="item.forumUrl"
                        fit="contain"
                      ></el-image>
                      <div class="rightTitle">
                        <div class="msgTitle">
                          {{ item.title }}
                        </div>
                        <div class="rightData">
                          {{ item.data }}
                        </div>
                        <div class="rightContent">
                          {{ item.content }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div
              class="nextPrev"
              v-if="deviceType == 'web' || deviceType == 'ipad'"
            >
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </div>
          </div>
           <!-- 移动端百家论坛 -->
           <div class="mobileForum" v-if="deviceType == 'mobile'">
            <div class="mobileContent">
              <div
                class="contentItem"
                v-for="(contentItem, contentIndex) in swiperList"
                :key="contentIndex"
              >
                <div class="leftUrl">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="contentItem.forumUrl"
                    fit="fill"
                  ></el-image>
                </div>
                <div class="rightMsg">
                  <div class="pageH3">{{ contentItem.title }}</div>
                  <div class="pageH4">{{ contentItem.content }}</div>
                  <div class="pageH5">{{ contentItem.data }}</div>
                </div>
              </div>

              <div class="more">查看更多 ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "Froum",
  data() {
    return {
      bannerUrl: require("@/assets/images/froum/froumBanner.png"), //banner
      aboutBoxList: [
        {
          title: "祭祖常識",
          content:
            "祭祖是華夏禮典的重要部分，是一種源自起心動念的行動！安世代Anshidai順天應時，結合現代科技，融入傳統文化，為全球華人弘揚孝道，奉祠祭祖，提供動念而行的方便之門。",
          boxUrl: require("@/assets/images/froum/deng.png"),
        },
      ],
      // 百家论坛轮播
      swiperoptionHistory: {
          spaceBetween: 16,
          mousewheelControl: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          mousewheelControl: true,
        },
      swiperList: [
        {
          forumUrl: require("@/assets/images/index/forum_01.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
          rightMsgList: [
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
          ],
        },
        {
          forumUrl: require("@/assets/images/index/forum_01.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
          rightMsgList: [
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
          ],
        },
        {
          forumUrl: require("@/assets/images/index/forum_01.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
          rightMsgList: [
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
          ],
        },
      ],

      swiperBottomList: [
        {
          forumUrl: require("@/assets/images/index/forum_02.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
        },
        {
          forumUrl: require("@/assets/images/index/forum_02.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
        },
        {
          forumUrl: require("@/assets/images/index/forum_02.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
        },
        {
          forumUrl: require("@/assets/images/index/forum_02.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
        },
      ],
    };
  },
  methods: {
    prevSlide() {
      this.$nextTick(() => {
        this.currentSwiper =
          (this.currentSwiper - 1 + this.swiperList.length) %
          this.swiperList.length;
      });
    },
    nextSlide() {
      this.$nextTick(() => {
        this.currentSwiper = (this.currentSwiper + 1) % this.swiperList.length;
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
@import "~@/assets/viewCss/froum/froum.scss";
</style>